<template>
	<view class="myCustomer">
		<navBar isBack :backColor="backColor" title="员工管理" style="transition: 1s;" :color="navTitColor" :background="nav_background"></navBar>
		<view class="mC_topImg" v-if="!scrollTop">
			<image src="https://manager.ryz1620.com/static/distri/makerCenter/bg.png" mode=""></image>
		
			<!-- 当前比率 -->
			<view class="mC_nowRatio">
				{{total}}人
				<view class="mC_nowRatioItem">
					<image src="https://manager.ryz1620.com/static/distri/fenxiao/makerEli2.png" mode=""></image>
					员工管理
				</view>
			</view>
		</view>
		
		
		<!-- 客户状态按钮 -->
		<view class="changeBtnBox" :style="scrollTop?'top:'+navHeight+'rpx;':''" :class="{'active_changeBtn':scrollTop}">
			<view class="mC_changAllBtn" :style="!scrollTop?'margin-top:'+(470-navHeight)+'rpx;':''">
				<view class="mC_changBtnLeft" :class="changeRatio?'mC_btnActive':''" @click="toChangeRatio">
					<image v-if="changeRatio" src="https://manager.ryz1620.com/static/distri/fenxiao/statusOk.png" mode=""></image>
					<image v-else src="https://manager.ryz1620.com/static/distri/fenxiao/statusOk2.png" mode=""></image>
					状态正常
				</view>
				<view class="mC_changBtnRight" :class="changeRatio?'':'mC_btnActive'" @click="toChangeRecord">
					<image v-if="changeRatio" src="https://manager.ryz1620.com/static/distri/fenxiao/over2.png" mode=""></image>
					<image v-else src="https://manager.ryz1620.com/static/distri/fenxiao/over.png" mode=""></image>
					已冻结
				</view>
			</view>
		</view>
		
		<!-- 正常员工列表 -->
		<view class="mC_customerList" :style="scrollTop?'padding-top:'+navHeight*2+'rpx;':'padding-top:30rpx;'" v-if="changeRatio">
			<view class="item" v-for="(item,index) in staffList" :key="index">
				<image :src="item.headimg" mode=""></image>
				<view class="info">
					<view class="top">
						{{item.realname?item.realname:item.nickname}}
						<view class="imgBox">
							<image @click="openMore(index)" :src="`${baseImg}/static/adminShop/more.png`" mode=""></image>
							<view class="moreBox" v-if="moreIndex==index && openMore_status" :class="{'active':role=='builder' || role=='decoration'}">
								<view class="more_item" @click="toRoot(item.user_id,item.realname,item.nickname,item.headimg,item.qy_wechat_id)">
									<view class="iconfont">&#xe638;</view>
									<span>权限</span>
								</view>
								<view class="more_item" @click="toStopStaff(item.user_id)" v-if="item.pid!=0">
									<view class="iconfont">&#xe6b5;</view>
									<span>冻结</span>
								</view>
								<view class="more_item" @click="toDelStaff(item.user_id)" v-if="item.pid!=0">
									<view class="iconfont">&#xe6ad;</view>
									<span>删除</span>
								</view>
								<view class="more_item" @click="toOnlineConstr(item.user_id)" v-if="role=='builder' || role=='decoration'">
									<view class="iconfont">&#xe710;</view>
									<span>工地</span>
								</view>
								<view class="more_item" @click="toEditBuild(item.user_id)" v-if="role=='builder' || role=='decoration'">
									<view class="iconfont">&#xe650;</view>
									<span>编辑</span>
								</view>
							</view>
						</view>
					</view>
					<scroll-view scroll-x="true" class="tagList">
						<span v-if="item.qy_wechat_id">企业微信</span>
						<span v-for="(item1,index1) in item.roles" >{{item1}}</span>
					</scroll-view>
				</view>
			</view>
			<u-loadmore :status="statusLoading" :icon-type="iconType" :load-text="loadText" />
		</view>
		
		<!-- 冻结员工列表 -->
		<view class="mC_customerList" :style="scrollTop?'padding-top:'+navHeight*2+'rpx;':'padding-top:30rpx;'" v-else>
			<view class="item" v-for="(item,index) in stopStaffList" :key="index">
				<image :src="item.headimg.path" mode=""></image>
				<view class="info">
					<view class="top">
						{{item.realname}}
						<view class="rightBtn" @click="cancelStop(item.user_id)">
							取消冻结
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="statusLoading" :icon-type="iconType" :load-text="loadText" />
		</view>
		
		<!-- 编辑施工员信息弹出框 -->
		<u-popup v-model="editShow" mode="center" border-radius="20">
			<view class="editInfo">
				<text>更改施工员信息</text>
				<view class="item">
					头像
					<image @click="editAvatar" :src="builderInfo.avatar.path" mode=""></image>
				</view>
				<view class="item">
					昵称
					<input type="text" value="" v-model="builderInfo.name" placeholder="请输入昵称" />
				</view>
				<view class="editBtn" @click="editSubmit">确定</view>
			</view>
		</u-popup>
		
		<view class="btn">
			<button type="default" @click="toSubmit">添加员工</button>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue';
	import service_distri from '@/service/distri.js';
	import URL from '@/config/url.js'
	export default{
		data(){
			return{
				statusLoading: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了~'
				},
				changeRatio:true, //切换正常或过期
				staffList:[],
				total:0,
				page:1,
				pagesize:10,
				navHeight:200,
				baseImg:this.$static,
				openMore_status:false,
				moreIndex:null,
				stopStaffList:[],
				role:'',
				backColor:'#fff',
				navTitColor:'#fff',
				nav_background:'transparent',
				scrollTop:false,
				// listLength:null,
				editShow:false,
				builderInfo:{},//施工员信息
			}
		},
		onLoad(options) {
			this.role = this.$store.state.index.role
			this.navHeight = this.$store.state.system.navBarHeight*2
			this.getStaffList()
			let params = {
				user_id:this.$store.state.index.userId,
				page:1,
				pagesize:10
			}
			this.$api.allRoot(params).then(res=>{
				console.log(res,'所有权限')
			})
		},
		onPageScroll(e) {
			console.log(e,'滑动')
			// this.scrollTop = e.scrollTop
			if(e.scrollTop>=110){
				this.scrollTop = true
				this.backColor = '#333'
				this.navTitColor = '#333'
				this.nav_background = '#fff'
			}else{
				this.scrollTop = false
				this.backColor = '#fff'
				this.navTitColor = '#fff'
				this.nav_background = 'transparent'
			}
		},
		onShow() {
			if(this.changeRatio){
				this.getStaffList()
			}else{
				this.getStopStaff()
			}
			
		},
		onHide() {
			this.openMore_status=false
		},
		onReachBottom() {
			this.page++
			if(this.changeRatio){
				service_distri.get_promoterList({is_staff:1,page:this.page,pagesize:this.pagesize}).then(res=>{
					console.log(res,'创客精英列表')
					if(res.code==1){
						if(!res.data.list.length){
							this.statusLoading = 'nomore'
						}else{
							this.statusLoading = 'loading'
						}
						this.staffList = this.staffList.concat(res.data.list)
						this.total = res.data.total
					}
				})
			}else{
				let params = {
					user_id:this.$store.state.index.userId,
					page:this.page,
					pagesize:this.pagesize
				}
				this.$api.stopStaffList(params).then(res=>{
					console.log(res,'冻结员工列表')
					if(res.code==1){
						if(!res.data.list.length){
							if(!res.data.list.length){
								this.statusLoading = 'nomore'
							}else{
								this.statusLoading = 'loading'
							}
						}
						this.stopStaffList = this.stopStaffList.concat(res.data.list)
						this.total = res.data.total
					}
				})
			}
		},
		methods:{
			// 获取员工列表
			// 获取创客精英
			getStaffList(){
				this.page = 1
				uni.showLoading({
					title:'加载中...'
				})
				service_distri.get_promoterList({is_staff:1,page:this.page,pagesize:this.pagesize}).then(res=>{
					console.log(res,'创客精英列表')
					if(res.code==1){
						if(res.data.list.length<10){
							this.statusLoading = 'nomore'
						}
						// this.listLength = res.data.list.length
						this.staffList = res.data.list?res.data.list:[];
						this.total = res.data.total
					}
				})
				uni.hideLoading()
			},
			// 进入我的在线工地
			toOnlineConstr(user_id){
				uni.navigateTo({
					url:'/pagesOne/constr/staffManage/staffInfo?user_id='+user_id
				})
			},
			// 获取冻结员工列表
			getStopStaff(){
				this.page = 1
				uni.showLoading({
					title:'加载中...'
				})
				let params = {
					user_id:this.$store.state.index.userId,
					page:this.page,
					pagesize:this.pagesize
				}
				this.$api.stopStaffList(params).then(res=>{
					console.log(res,'冻结员工列表')
					if(res.code==1){
						if(res.data.list.length<10){
							this.statusLoading = 'nomore'
						}
						// this.listLength = res.data.list.length
						this.stopStaffList = res.data.list?res.data.list:[],
						this.total = res.data.total
					}
				})
				uni.hideLoading()
			},
			
			// 删除员工
			toDelStaff(id){
				console.log(id,'员工')
				uni.showModal({
					content:'确定要删除该员工吗？',
					success:res=>{
						if(res.confirm){
							service_distri.delStaff({staff_user_id:id}).then(res=>{
								console.log(res,'删除员工结果')
								if(res.code==1){
									this.openMore_status = false
									this.getStaffList()
									uni.showToast({
										title:'删除成功',
										icon:'success'
									})
								}else{
									uni.showToast({
										title:res.msg,
										icon:'none'
									})
								}
							})
						}
					}
				})
			},
			
			// 点击编辑按钮
			toEditBuild(id){
				this.editShow = true
				service_distri.getBuilderInfo({id}).then(res=>{
					console.log(res,'施工员信息')
					if(res.code==1){
						this.builderInfo = res.data?res.data:{}
					}
				})
			},
			// 点击更换头像
			editAvatar(){
				uni.chooseImage({
					count:1,
				    success: (res) => {
				        const tempFilePaths = res.tempFilePaths;
				        uni.uploadFile({
				            url: URL.ENTER_UPLOAD_IMAGE,
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'user': 'test'
				            },
				            success: (uploadFileRes) => {
								uni.showLoading({
									title:'上传中'
								})
				                console.log(uploadFileRes.data);
								let data = JSON.parse(uploadFileRes.data)
								if(data.code==1){
									let obj = {
										path:data.data.url,
										id:data.data.id
									}
									this.builderInfo.avatar = obj
								}else{
									uni.showToast({
										title:data.msg,
										icon:'none'
									})
								}
								setTimeout(function(){
									uni.hideLoading()
								},500)
				            }
				        });
				    }
				});
			},
			// 更改施工员信息确定按钮
			editSubmit(){
				let params = {
					id:this.builderInfo.id,
					avatar:this.builderInfo.avatar.id,
					name:this.builderInfo.name,
					phone:this.builderInfo.phone
				}
				service_distri.editBuilder(params).then(res=>{
					console.log(res,'更改施工员信息解果')
					if(res.code==1){
						uni.showToast({
							title:'编辑成功',
							icon:'success'
						})
						this.editShow = false
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			
			//点击到状态正常
			toChangeRatio(){
				this.changeRatio = true
				this.openMore_status = false
				this.getStaffList()
			},
			
			//点击到已冻结
			toChangeRecord(){
				this.changeRatio = false
				this.openMore_status = false
				this.getStopStaff()
			},
			
			// 点击更多
			openMore(index){
				this.moreIndex = index
				console.log(index,'打开更多')
				if(this.openMore_status){
					this.openMore_status = false
				}else{
					this.openMore_status = true
				}
			},
			
			// 添加员工
			toSubmit(){
				uni.navigateTo({
					url:'makerList'
				})
			},
			
			// 点击权限
			toRoot(id,realname,nickname,headImg,qy_wechat_id){
				console.log(id,'员工id')
				let qyUserId = qy_wechat_id?qy_wechat_id:'';
				let name = realname?realname:nickname
				uni.navigateTo({
					url:`editRoot?staff_user_id=${id}&name=${name}&headImg=${headImg}&qyUserId=${qyUserId}`
				})
				this.openMore_status = false
			},
			// 冻结员工
			toStopStaff(id){
				uni.showModal({
					content:'确定冻结此员工吗？',
					success:res=>{
						if(res.confirm){
							this.$api.stopStaff({staff_user_id:id}).then(res=>{
								if(res.code==1){
									this.getStaffList()
									uni.showToast({
										title:'冻结成功',
										icon:'success'
									})
									this.openMore_status = false
								}else{
									uni.showToast({
										title:res.msg,
										icon:'none'
									})
								}
							})
						}
					}
				})
			},
			
			// 取消冻结
			cancelStop(id){
				uni.showModal({
					title:'确定恢复该员工吗？',
					success:res=> {
						if(res.confirm){
							this.$api.cancelStop({staff_user_id:id}).then(res=>{
								if(res.code==1){
									this.getStopStaff()
									uni.showToast({
										title:'恢复成功',
										icon:'success'
									})
								}else{
									uni.showToast({
										title:res.msg,
										icon:'none'
									})
								}
							})
						}
					}
				})
			}
			
		},
		components:{
			navBar
		},
	}
</script>

<style lang="scss">
	page{height: 100%;}
	@import  '../../iconfont.css';
	.myCustomer{
		height: 100%;
		background-color: #fff;
		padding-bottom: 100rpx;
		padding-bottom: constant(safe-area-inset-bottom);///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom);///兼容 IOS>11.2/
		.mC_topImg{width: 100%;height: 430rpx;position: absolute;top: 0;left: 0;z-index: 0;image{width: 100%;height: 100%;}}
		
		// 当前比率
		.mC_nowRatio{
			width: 100%;
			position: absolute;
			z-index: 2;
			bottom: 60rpx;
			left: 0;
			padding-left: 28rpx;
			// margin: 78rpx 0 0 32rpx;
			font: 500 60rpx/52rpx PingFang SC;
			color: #fff;
			.mC_nowRatioItem{
				margin-top: 20rpx;
				display: flex;
				font: 500 30rpx/40rpx PingFang SC;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 16rpx;
				}
			}
		}
		
		.changeBtnBox{
			width: 100%;
			// padding: 20rpx 0;
			background-color: #fff;
		}
		// 客户状态按钮
		.mC_changAllBtn{
			position: relative;
			width: 702rpx;
			height: 72rpx;
			margin: 0 auto ;
			background-color: #fff;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			font: 500 30rpx/40rpx PingFang SC;
			image{width: 28rpx;height: 28rpx;margin:0 16rpx 0 96rpx;}
			.mC_changBtnLeft{
				display: flex;
				align-items: center;
				width: 50%;
				height: 100%;
				border-radius: 16rpx 0 0 16rpx;
				border: 2rpx solid #DBA954;
				color: #DBA954;
			}
			.mC_changBtnRight{
				display: flex;
				align-items: center;
				width: 50%;
				height: 100%;
				border-radius: 0 16rpx 16rpx 0;
				border: 2rpx solid #DBA954;
				color: #DBA954;
			}
			.mC_btnActive{
				background-color: #DBA954;
				border: 0;
				color: #fff;
			}
		}
		.active_changeBtn{
			position: fixed;
			z-index: 101;
			
		}
		
		//我的客户列表
		.mC_customerList{
			padding-top: 30rpx;
			margin-bottom:150rpx;
			background-color: #fff;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			.item{
				width: 100%;
				padding: 30rpx 36rpx;
				display: flex;
				// justify-content: space-between;
				align-items: center;
				image{
					flex-shrink: 0;
					width:96rpx;
					height: 96rpx;
					border-radius: 50%;
				}
				.info{
					width: 100%;
					margin-left:24rpx;
					font:400 26rpx/40rpx PingFang SC;
					color: #0A0605;
					display: flex;
					flex-direction: column;
					.top{
						display:flex;
						justify-content: space-between;
						align-items: center;
						.rightBtn{
							width: 154rpx;
							height: 56rpx;
							line-height: 54rpx;
							text-align: center;
							border-radius: 28rpx;
							border: 2rpx solid #CCCCCC;
							font: 500 24rpx/56rpx #939393;
						}
						.imgBox{
							position: relative;
							image{
								width: 50rpx;
								height: 50rpx;
							}
							.moreBox{
								position: absolute;
								left: -265rpx;
								top: 20rpx;
								z-index: 100;
								width: 255rpx;
								height: 96rpx;
								display: flex;
								align-items: center;
								padding: 8rpx 0rpx;
								justify-content: space-around;
								background-color: rgba(0,0,0,0.6);
								border-radius: 8rpx 0rpx 8px 8rpx;
								.more_item{
									.iconfont{width: 32rpx;height: 30rpx;vertical-align: top;}
									display: flex;
									flex-direction: column;
									justify-content: space-between;
									align-items: center;
									font: 400 22rpx/20rpx PingFang SC;
									color: #fff;
									image{
										width: 32rpx;
										height: 32rpx;
									}
									span{margin-top: 10rpx;}
								}
							}
							.active{
								width: 400rpx;
								left: -410rpx;
							}
						}
					}
				}
				.tagList{
					// display: flex;
					white-space: nowrap;
					width: 558rpx;
					margin-top:16rpx;
					span{
						display: inline-block;
						border-radius: 18rpx;
						padding: 0rpx 20rpx;
						height: 36rpx;
						background-color: #F9F6F3;
						font: 400 24rpx/36rpx PingFang SC;
						color: #A98F68;
						margin-right: 16rpx;
					}
				}
			}
		}
		
		// 编辑施工员信息弹出框
		.editInfo{
			padding: 30rpx;
			width: 500rpx;
			text{
				font: 600 32rpx/80rpx PingFang SC;
				color: #333;
				display: block;
				text-align: center;
				margin-bottom: 50rpx;
			}
			.item{
				display: flex;
				align-items: center;
				margin-bottom: 50rpx;
				image{
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					margin-left: 100rpx;
					border: 2rpx solid #DBA954;
				}
				input{
					// margin-left: 30rpx;
					text-align: center;
				}
			}
			.editBtn{
				width: 260rpx;
				text-align: center;
				padding: 0 50rpx;
				height: 60rpx;
				font: 500 26rpx/60rpx PingFang SC;
				color: #402200;
				background: linear-gradient(216deg, rgba(227, 210, 175, 0.94), rgba(195, 171, 124, 0.94));
				border-radius: 40rpx;
				margin: 0 auto;
			}
		}
		
		.btn{
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 5;
			height: calc(120rpx+ constant(safe-area-inset-bottom));
			height: calc(120rpx + env(safe-area-inset-bottom));
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			button{
				width: 606rpx;
				height: 80rpx;
				border-radius: 46rpx;
				margin: 20rpx auto;
				background: linear-gradient(86deg, #DBA954 0%, #EABA6A 100%);
				box-shadow: 0px 3px 6px rgba(219, 169, 84, 0.3);
				font: 500 32rpx/80rpx PingFang SC;
				color: #fff;
			}
		}
		
	}
</style>
